// home.styl
.home-layout
  min-height: 100vh
  display: flex
  flex-direction: column

  .ant-layout-header
    padding: 0
    height: 64px
    line-height: 64px
    z-index: 2
    box-shadow: 0 2px 8px rgba(0,0,0,0.1)

  .header
    display: flex
    justify-content:space-between
    align-items: center
    padding: 0 24px
    background: #001529
    position: sticky
    top: 0
    
    .logo
      color: rgba(255,255,255,0.9)
      font-size: 20px
      font-weight: 500
      cursor: pointer
      margin-right: 40px
      transition: opacity 0.3s
      &:hover
        opacity: 0.8

    .search-bar
      max-width: 600px
      flex: 1
      .ant-input-group
        border-radius: 4px
        overflow: hidden

    .user-actions
      display: flex
      align-items: center
      gap: 18px

      .ant-avatar
        background: #1890ff
        transition: transform 0.2s
        &:hover
          transform: scale(1.05)
      .username
        margin-left: 8px
        color: rgba(255,255,255,0.9)

      .notif-bell-wrapper
        position: relative
        cursor: pointer
        margin-right: 8px
        .notif-bell
          font-size: 22px
          color: #faad14
          transition: color 0.2s
          &:hover
            color: #ff9800

      .notif-dropdown-menu
        min-width: 180px !important
        max-width: 200px
        padding: 0 !important
        .notif-dropdown
          max-height: 320px
          overflow-y: auto
          background: #fff
          border-radius: 8px
          box-shadow: 0 4px 24px rgba(0,0,0,0.12)
          padding: 4px 0
          .notif-empty
            text-align: center
            color: #aaa
            padding: 24px 0
          .notif-item
            padding: 16px 18px 14px 18px
            border-radius: 10px
            margin: 18px 8px 0 8px
            box-shadow: 0 2px 8px rgba(0,0,0,0.06);
            border: none;
            background: #fff;
            transition: background 0.2s, box-shadow 0.2s;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            gap: 0;
            position: relative;
            &:first-child { margin-top: 8px; }
            &:hover
              background: #f6faff
              box-shadow: 0 4px 16px rgba(24,144,255,0.10)
            &.read
              background: #fafafa
              .notif-title
                color: #aaa
            .notif-title
              font-weight: 800
              font-size: 16px
              color: #222
              margin-bottom: 6px
              line-height: 1.5
            .notif-content
              font-size: 13px
              color: #888
              margin-bottom: 10px
              line-height: 1.7
            .notif-meta
              display: flex;
              align-items: center;
              justify-content: space-between;
              font-size: 11px;
              color: #bbb;
              margin-top: 2px;
              .notif-date
                font-size: 11px
                color: #ccc
                margin-right: 8px
              .ant-btn-link
                margin-left: auto
                padding: 0 2px
                font-size: 12px
                color: #1890ff
                position: absolute
                right: 18px
                bottom: 10px
                &:hover
                  color: #faad14

  .ant-layout
    display: flex
    flex: 1
    overflow: hidden

    .left-sider
      order: 0
      background: #fff
      width: 260px !important
      border-right: 1px solid #f0f0f0
      box-shadow: 2px 0 8px rgba(0,0,0,0.03)
      @media (max-width: 1200px)
        width: 240px !important

      .ant-menu
        border-right: none

      .user-stats
        margin: 16px
        .stat-item
          display: flex
          justify-content: space-between
          margin: 12px 0
          span:first-child
            color: #666
          .ant-tag
            margin: 0

      .ranking-card
        .ant-tabs
          &-nav
            margin: 0 8px
            &::before
              border-bottom: none
          &-tab
            padding: 8px 12px !important
            &-btn
              font-size: 13px
            &-active
              .ant-tabs-tab-btn
                color:#1890ff
          &-ink-bar
            background:rgb(24, 128, 255)
            height: 2px !important

        .ranking-item
          padding: 12px 16px !important
          display: flex
          justify-content: space-between
          align-items: center
          border: none !important
          transition: none
          &:hover
            background: #f8f9fa !important
          
          .rank-info
            display: flex
            align-items: center
            flex: 1
            margin-right: 8px

          .rank-detail
            margin-left: 12px
            .username
              font-size: 14px
              color: #333
              white-space: nowrap
              overflow: hidden
              text-overflow: ellipsis
            .value
              font-size: 12px
              color: #666

          .magic-tag
            background:#722ed1
            color: white
            border: none
            border-radius: 14px
            padding: 0 8px
            font-size: 12px

    .main-content
      order: 1
      flex: 1
      padding: 24px
      background: #f5f7fa
      overflow-y: auto
      .upload-btn
        text-align: right
        margin-bottom: 16px
        .ant-btn
          padding: 0 24px
          height: 36px
      .double-upload-btn
        animation: glow 1.2s infinite alternate
        border: 2px solid gold !important
        position: relative
        z-index: 1
      .double-tag
        margin-left: 8px
        animation: bounce 0.8s infinite alternate
        font-weight: bold
        font-size: 13px
        background: linear-gradient(90deg, #ffe066 0%, #ffd700 100%) !important
        color: #ad6800 !important
        border: none !important
        box-shadow: 0 0 8px #ffd70088
      .torrent-section
        background: white
        padding: 24px
        border-radius: 8px
        box-shadow: 0 2px 8px rgba(0,0,0,0.05)
        h2
          margin-bottom: 16px
          font-size: 20px
          padding-bottom: 8px
          border-bottom: 2px solid #1890ff
          display: inline-block
        
        .ant-list-item
          background: #fff
          margin-bottom: 16px
          border-radius: 8px
          transition: all 0.3s
          padding: 24px !important
          border: 1px solid #f0f0f0
          &:hover
            transform: translateY(-2px)
            box-shadow: 0 4px 12px rgba(0,0,0,0.1)
            border-color: #1890ff
          
          .torrent-cover
            width: 80px
            height: 80px
            display: flex
            align-items: center
            justify-content: center
            background: #f5f7fa
            border-radius: 4px
            overflow: hidden
            img
              width: 100%
              height: 100%
              object-fit: cover
          
          .torrent-title
            font-size: 18px
            font-weight: 500
            color: #1890ff
            &:hover
              color: #096dd9
          
          .torrent-description
            .size-info
              color: #666
              margin: 8px 0
              .anticon
                margin-right: 4px
              .upload-time
                margin-left: 16px
            
            .excerpt
              color: #666
              font-size: 14px
              line-height: 1.6
              display: -webkit-box
              -webkit-line-clamp: 2
              -webkit-box-orient: vertical  
              overflow: hidden
            
          .meta-stats
            display: flex
            gap: 24px
            .stat
              color: #666
              .anticon
                margin-right: 4px
          
          .category-tag
            border-radius: 14px
            padding: 0 12px
            .anticon
              margin-right: 4px
          
          .detail-btn
            position: absolute
            right: 24px
            bottom: 24px
            display: flex
            align-items: center
            .anticon
              margin-left: 4px
              font-size: 12px

@media (max-width: 768px)
  .torrent-section
    padding: 16px !important
    .ant-list-item
      padding: 16px !important
      .torrent-cover
        width: 60px
        height: 60px
      .torrent-title
        font-size: 16px
      .meta-stats
        flex-wrap: wrap
        gap: 8px
      .detail-btn
        position: static
        margin-top: 12px

.loading-container
  display: flex
  justify-content: center
  align-items: center
  height: 100vh
  background: rgba(255,255,255,0.8)
  .ant-spin-text
    margin-top: 12px
    color: #666

.torrent-detail
  max-width: 1200px
  margin: 0 auto
  padding: 24px

  .detail-card
    border-radius: 16px
    box-shadow: 0 8px 32px rgba(0,0,0,0.08)
    
    .header-section
      display: flex
      flex-direction: column
      padding: 24px
      background: linear-gradient(135deg, #f8fbff, #f0f9ff)
      
      .uploader-info
        display: flex
        gap: 24px
        margin-bottom: 24px
        
        .cover-wrapper
          position: relative
          width: 240px
          height: 240px
          border-radius: 12px
          overflow: hidden
          flex-shrink: 0
          
          .resource-cover
            width: 100%
            height: 100%
            object-fit: cover
            
          .cover-overlay
            position: absolute
            bottom: 0
            left: 0
            right: 0
            padding: 16px
            background: linear-gradient(transparent, rgba(0,0,0,0.6))
            
            .category-tag
              background: rgba(255,255,255,0.9)
              color: #1890ff
              font-weight: 500
              border: none

        .title-wrapper
          flex: 1
          
          .resource-title
            font-size: 28px
            margin: 0 0 12px
            color: #1f1f1f
          
          .meta-line
            display: flex
            align-items: center
            gap: 8px
            color: #666
            font-size: 14px
            
            .uploader-avatar
              margin-right: 4px
            
            .divider
              opacity: 0.6

          .stats-row
            display: flex
            gap: 24px
            margin-top: 16px
            
            .stat-item
              display: flex
              align-items: center
              gap: 8px
              padding: 8px 16px
              background: rgba(24,144,255,0.08)
              border-radius: 8px
              
              span
                font-size: 16px
                font-weight: 500
                color: #1890ff
                
              .stat-label
                font-size: 12px
                color: #666

      .action-buttons
        margin-top: 24px
        width: 100%
        justify-content: flex-end

    .content-section
      padding: 24px
      
      .section-title
        font-size: 20px
        color: #1f1f1f
        margin: 24px 0 16px
        padding-bottom: 8px
        border-bottom: 2px solid #1890ff
        display: inline-block
        
        .comment-count
          color: #666
          font-size: 0.8em

      .description-content
        font-size: 15px
        line-height: 1.8
        color: #444
        padding: 16px
        background: #f8f9fa
        border-radius: 8px

      .file-info
        display: grid
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))
        gap: 24px
        margin: 24px 0
        
        .info-card
          padding: 16px
          background: #f8f9fa
          border-radius: 8px
          
          h4
            margin: 0 0 12px
            color: #1890ff
          
          .info-row
            display: flex
            justify-content: space-between
            padding: 8px 0
            border-bottom: 1px solid #eee
            
            &:last-child
              border-bottom: none
              
            .info-label
              color: #666
              
            .info-value
              font-weight: 500
              color: #333

      .tag-section
        .no-tags
          color: #999
          font-style: italic

      .comment-section
        .comment-main
          display: flex
          gap: 16px
          width: 100%
          
          .comment-avatar
            flex-shrink: 0
            
          .comment-body
            flex: 1
            
            .comment-header
              display: flex
              align-items: center
              gap: 12px
              margin-bottom: 8px
              
              .username
                font-weight: 500
                color: #1f1f1f
                
              .comment-rating
                font-size: 14px
                .ant-rate-star
                  margin-right: 2px
                  
              .comment-time
                color: #999
                font-size: 12px
                margin-left: auto
                
            .comment-text
              color: #444
              line-height: 1.6
              margin: 0
              
            .comment-actions
              margin-top: 8px
              
              .like-button
                padding: 0 8px
                height: 28px
                &:hover
                  transform: scale(1.05)

@media (max-width: 768px)
  .torrent-detail
    padding: 12px
    
    .header-section
      padding: 16px
      
      .uploader-info
        flex-direction: column
        
        .cover-wrapper
          width: 100%
          height: 200px
          
      .action-buttons
        flex-direction: column
        button
          width: 100%
          margin-bottom: 12px
    
    .content-section
      padding: 16px

.ratio-status-content
  display: flex
  flex-direction: column
  align-items: center
  padding: 20px 0 10px

  .ratio-progress
    margin-bottom: 25px

  .ratio-value
    text-align: center
    font-size: 28px
    font-weight: 600
    .ratio-label
      font-size: 14px
      font-weight: normal
      color: #666
      margin-top: 5px

  .status-alert
    margin-bottom: 20px

  .restriction-detail
    background: #fff6f6
    border-radius: 8px
    padding: 15px
    margin: 15px 0
    border-left: 4px solid #ff4d4f
    p
      margin: 8px 0
    .restriction-title
      font-weight: 600
      color: #ff4d4f
      margin-bottom: 12px
    .restriction-solution
      margin-top: 15px
      padding-top: 10px
      border-top: 1px dashed #ffccc7

  .ratio-tips
    background: #f9f9f9
    border-radius: 8px
    padding: 15px
    font-size: 14px
    line-height: 1.8
    p
      margin: 6px 0

@keyframes glow
  from
    box-shadow: 0 0 8px gold
  to
    box-shadow: 0 0 24px orange

@keyframes bounce
  from
    transform: translateY(0)
  to
    transform: translateY(-4px)
